<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    =={{msg}}
    <hr />
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.min.js"></script>
  <script src="./lib/echarts.min.js"></script>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        msg: 'hello  vue'
      },
      mounted() {
        const dom = document.querySelector('#main')
  const myChart = echarts.init(dom)
        option = {
   grid: {
      top: 80,
      right: 40,
      bottom: 40,
      left: 40,
      containLabel: true
   },
   legend: {
      data: [
         {
            name: '订单量'
         },
         {
            name: '时长'
         }
      ],
      icon: 'rect',
      itemWidth: 13,
      itemHeight: 13,
      itemGap: 40,
      top: 30,
      right: 30,
      textStyle: {
         color: 'rgba(0, 0, 0, 0.85)'
      }
   },
   xAxis: {
      data: ['1月', '2月', '3月', '4月', '5月', '6月'],
      axisLabel: {
         color: 'rgba(0, 0, 0, 0.45)'
      },
      axisTick: {
         show: false
      },
      axisLine: {
         lineStyle: {
            color: 'rgba(0, 0, 0, 0.15)',
            width: 0
         }
      }
   },
   yAxis: [
      {
         type: 'value',
         splitNumber: 10,
         axisLabel: {
            color: 'rgba(0, 0, 0, 0.45)'
         },
         axisTick: {
            show: false
         },
         axisLine: {
            show: false
         },
         splitLine: {
            lineStyle: {
               color: 'rgba(0, 0, 0, 0.15)'
            }
         }
      },
      {
         type: 'value',
         alignTicks: true,
         splitLine: {
            show: false
         },
         axisLabel: {
            color: 'rgba(0, 0, 0, 0.45)'
         }
      }
   ],
   series: [
      {
         name: '订单量',
         yAxisIndex: 0,
         type: 'bar',
         data: [820, 720, 930, 820, 580, 490],
         barMaxWidth: 15,
         itemStyle: {
            borderRadius: [20, 20, 0, 0],
            color: {
               type: 'linear',
               x: 0,
               y: -0.2,
               x2: 0,
               y2: 1,
               colorStops: [
                  {
                     offset: 0,
                     color: '#A7CEFF'
                  },
                  {
                     offset: 1,
                     color: '#5B8FF9'
                  }
               ]
            }
         },
         emphasis: {
            label: {
               show: true,
               position: 'top',
               color: '#1890FF'
            }
         }
      },
      {
         name: '时长',
         yAxisIndex: 1,
         type: 'line',
         data: [0.62, 0.41, 0.41, 0.19, 0.03, 0.12],
         symbol: 'circle',
         symbolSize: 8,
         lineStyle: {
            color: '#FF8C09'
         },
         itemStyle: {
            color: '#FF8C09'
         },
         emphasis: {
            itemStyle: {
               borderWidth: 2,
               borderColor: '#fff'
            },
            label: {
               show: true,
               position: 'top',
               color: '#FF8C09',
               align: 'left',
               offset: [10, 5]
            }
         }
      }
   ]
};
myChart.setOption(option);
      },
    })

    // console.log(vm, 2222);
  </script>
</body>

</html>